<style module>
.me {
  width: 100%;
  height: 300px;
  flex: 1 1 auto;
}
</style>
<template>
  <div ref="myChart" :class="$style.me" :style="chartStyle"></div>
</template>

<script>
import themes from "./echartThemes/themes";

export default {
  name: "starSankey",
  data() {
    return {
      myChart: {},
    };
  },
  props: {
    data: {
      default: () => {
        return {
          values: [
            {
              name: "a",
            },
            {
              name: "b",
            },
            {
              name: "a1",
            },
            {
              name: "a2",
            },
            {
              name: "b1",
            },
            {
              name: "c",
            },
          ],
          links: [
            {
              source: "a",
              target: "a1",
              value: 5,
            },
            {
              source: "a",
              target: "a2",
              value: 3,
            },
            {
              source: "b",
              target: "b1",
              value: 8,
            },
            {
              source: "a",
              target: "b1",
              value: 3,
            },
            {
              source: "b1",
              target: "a1",
              value: 1,
            },
            {
              source: "b1",
              target: "c",
              value: 2,
            },
          ],
        };
      },
    },
    chartStyle: {
      default: () => {},
    },
    config: {
      default: () => {
        return {
          toolbox: true,
          orient: "horizontal",
          nodeWidth: 20,
          nodeGap: 8,
          nodeAlign: "justify",
          draggable: true,
        };
      },
    },
    //国际化
    language: {
      default: () => {
        return {
          "en-US": {
            title: "title",
          },
          "zh-CN": {
            title: "标题",
          },
        };
      },
    },
  },
  computed: {
    option() {
      return {
        title: {
          text: this.language[this.G_Locale].title,
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        toolbox: {
          show: this.config.toolbox,
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
      };
    },
    seriesItem() {
      return {
        type: "sankey",
        layout: "none",
        orient: this.config.orient,
        nodeWidth: this.config.nodeWidth,
        nodeGap: this.config.nodeGap,
        nodeAlign: this.config.nodeAlign,
        draggable: this.config.draggable,
        emphasis: {
          focus: "adjacency",
        },
        data: this.data.values,
        links: this.data.links,
      };
    },
  },
  mounted() {
    this.registerTheme();
    this.handleSetChart();
    window.onresize = () => {
      this.handleResize();
    };
  },
  methods: {
    registerTheme() {
      this.echarts.registerTheme("dark", themes.dark);
      this.echarts.registerTheme("light", themes.light);
      this.echarts.registerTheme("vintage", themes.vintage);
      this.echarts.registerTheme("westeros", themes.westeros);
      this.echarts.registerTheme("essos", themes.essos);
      this.echarts.registerTheme("wonderland", themes.wonderland);
      this.echarts.registerTheme("walden", themes.walden);
      this.echarts.registerTheme("chalk", themes.chalk);
      this.echarts.registerTheme("infographic", themes.infographic);
      this.echarts.registerTheme("macarons", themes.macarons);
      this.echarts.registerTheme("roma", themes.roma);
      this.echarts.registerTheme("shine", themes.shine);
      this.echarts.registerTheme("purplePassion", themes.purplePassion);
    },
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el, this.config.theme);
      this.initChartOption();
    },
    initChartOption() {
      this.buildSankeyOption();
    },
    buildSankeyOption() {
      let option = {
        ...this.option,
        series: [this.seriesItem],
      };
      this.myChart.setOption(option);
    },
    handleResize() {
      this.myChart.resize();
    },
  },
};
</script>

<style scoped></style>
